<template>
  <div class="greenhandred">
    <img :src="bg" alt="">
    <div class="greenhandred-btn" :style="{top: btnTop + 'px'}">
      <p @click="toSignup">领取红包</p>
    </div>   
    <div class="greenhandred-info" :style="{top: infoTop + 'px'}">
      <p>{{ text }}</p>    
    </div>
    <div class="greenhandred-good-position" :style="{top: goodTop + 'px'}">
      <div class="greenhandred-good-wrapper">
        <good v-bind="good" color="#ea0030" lableType="newRed"></good>
        <div class="greenhandred-btn-wrapper">
          <span @click="togoodDetail">立即出借</span>        
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import good from 'components/good'

  export default {
    data () {
      return {
        bg: require('assets/xinshou_bgbg@3x.png'),
        text: '2017年01月01日00:00起，凡新注册分秒金融的用户，均可领取总价值1288元的新手专享现金红包。',
        h: 0,
        w: 0,
        good: {}
      }
    },
    computed: {
      infoTop () {
        return this.h * 950 / 1960
      },
      btnTop () {
        return this.h * 850 / 1960
      },
      goodTop () {
        return this.h * 1410 / 1960
      }
    },
    methods: {
      togoodDetail () {
        this.$router.push(`/goodDetail/${this.good.borrowOrder}`)
      },
      toSignup () {
        this.$router.push('/signup')
      }
    },
    created () {
      this.w = document.documentElement.clientWidth
      this.h = Number(this.w) * 1960 / 750
      this.$http.get(`/api/borrow/borrowInfo/list?currentPage=1&numPerPage=10&borrowNewhand=1`)
        .then((res) => {
          if (res.data.success) {
            this.good = res.data.data.list[0]
          }
        })
        .catch((err) => {
          alert('请检查您的错误', err)
        })
    },
    components: {
      good
    }
  }
</script>

<style lang='scss'>
  .greenhandred {
    position: relative;
    font-size: 0;
    img {
      width: 100%;
    }
    &-info {
      position: absolute;
      top: 0;
      width: 100%;
      height: 200px;
      p {
        width: 460px;
        font-size: 24px;
        color: #fff5d5;
        line-height: 30px;
        margin: 0 auto;
      }
    }
    &-btn {
      position: absolute;
      top: 0;
      width: 100%;
      height: 36px;
      p {
        text-align: center;
        font-size: 36px;
        color: #fff;
      }  
    }
    &-good-position {
      position: absolute;
      width: 100%;
      min-height: 100px;
    }
    &-good-wrapper {
      width: 90%;
      margin: 0 auto;
      border: 1px solid red;
      border-radius: 10px;
      padding-bottom: 20px;
      .good {
        background: none;
      }
    }
    &-btn-wrapper {
      text-align: center;
      width: 100%;
      span {
        display: inline-block;
        width: 470px;
        height: 90px;
        background: #ea0030;
        border-radius: 45px;
        font-size: 36px;
        line-height: 90px;
        color: #fff;
      }
    }
  }
</style>
